<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0”>
    <title>项目练习001</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/elf.css">
</head>
<body>

<!--登录-->
<div class="head-login clearfix">
    <div class="cont">
        <div class="fl">
            <ul class="clearfix">
                <li><a class="blue" href="#">QQ交谈</a></li>
                <li><a class="blue" style="background-position: 5px -52px;" href="#">官方qq群</a></li>
                <li><p><a class="gray" href="#">常见问题</a></p></li>
            </ul>
        </div>
        <div class="fr">
            <ul class="clearfix">
                <li><div><a class="gray tb" href="#">点我赚钱</a></div></li>
                <li><div><a class="gray" href="#">注册</a></div></li>
                <li><div><a class="gray" href="#">登录</a></div></li>
                <li><a class="blue" href="#">QQ登录</a></li>
                <li><a class="green" href="#">微信登录</a></li>
            </ul>
        </div>
    </div>
</div>

<!--导航栏-->
<div style="background-color: #fff">
    <div class="cont">
        <div class="clearfix head-nav">
            <ul>
                <li><a class="img-a" href="#"><img src="images/logo.png" alt="logo"></a></li>
                <li><a href="#" class="aitn">首页</a></li>
                <li><a href="#">原创设计</a></li>
                <li><a href="#">广告设计</a></li>
                <li><a href="#">淘宝设计</a></li>
                <li><a href="#">素材分类</a></li>
                <li><a href="#">千图灵感</a></li>
                <li><a href="#">设计工具</a></li>
                <li><a style="background-image: url(images/hot.png);background-repeat: no-repeat;background-position: right 25px" href="#">活动</a></li>
                <li><a style="background-image: url(images/n.png);background-repeat: no-repeat;background-position: right 31px" href="#">VIP特权</a></li>
            </ul>
        </div>
    </div>
</div>

<!--搜索框-->
<div class="seek">
    <div class="cont">
        <div class="seek-input">
            <h2>专业免费设计素材网站</h2>
                <input type="text" class="fl" placeholder="800万张免费设计素材任意下载">
                <button class="fl" style="background-color: #3dbc2a">搜全站</button>
                <button class="fr" style="background-color: #ff792f">搜原创</button>
        </div>
    </div>
</div>

<!--主体内容-->
<div class="cont">
    <!--横幅-->
    <div class="map">
        <a href="#"><img src="images/hf.jpg" alt="横幅"></a>
    </div>

    <!--广告导航-->
    <div class="btns clearfix">
        <ul>
            <li>
                <a class="btn1">原创VIP专区</a>
            </li>
            <li>
                <a class="btn2">平面/广告</a>
            </li>
            <li>
                <a class="btn3">淘宝设计</a>
            </li>
            <li>
                <a class="btn4">室内设计</a>
            </li>
            <li>
                <a class="btn5">网页/UI设计</a>
            </li>
            <li>
                <a class="btn6">影视/媒体</a>
            </li>
            <li>
                <a class="btn7">服装设计</a>
            </li>
        </ul>
    </div>
    <!--更多设计工具-->
    <div class="clearfix dls">
        <dl><a href="#">
            <dt class="elf1"></dt>
            <dd>开发手册</dd>
        </a></dl>
        <dl><a href="#">
            <dt class="elf2"></dt>
            <dd>UI图标库</dd>
        </a></dl>
        <dl><a href="#">
            <dt class="elf3"></dt>
            <dd>淘宝工具</dd>
        </a></dl>
        <dl><a href="#">
            <dt class="elf4"></dt>
            <dd>配色工具</dd>
        </a></dl>
        <dl><a href="#">
            <dt class="elf5"></dt>
            <dd>网页工具</dd>
        </a></dl>
        <dl><a href="#">
            <dt class="elf6"></dt>
            <dd>图标宝</dd>
        </a></dl>
        <dl><a href="#">
            <dt class="elf7"></dt>
            <dd>画册宝</dd>
        </a></dl>
        <dl><a href="#">
            <dt class="elf8"></dt>
            <dd>在线书法</dd>
        </a></dl>
        <dl><a href="#">
            <dt class="elf9"></dt>
            <dd>电商培训</dd>
        </a></dl>
        <dl><a href="#">
            <dt class="elf10"></dt>
            <dd>店铺装修代码</dd>
        </a></dl>
        <dl id="dl11"><a href="#">
            <dd>更多设计工具</dd>
        </a></dl>
    </div>

    <!--热门专题-->
    <div class="clearfix" style="margin-bottom: 40px">
        <div class="clearfix" style="margin-bottom: 20px">
            <div class="fl">
                <p style="font-size: 18px;color: #646767">热门专题</p>
            </div>
            <div class="fr">
                <a href="#"><p style="font-size: 14px;color: #646767">更多</p></a>
            </div>
        </div>
        <div class="list">
            <a href="#">
                <div class="list-img">
                    <img src="images/1_03.png" alt="喜庆元素">
                </div>
                <div class="list-info">
                    <p>喜庆元素背景集</p>
                </div>
            </a>
        </div>
        <div class="list">
            <a href="#">
                <div class="list-img">
                    <img src="images/1_05.png" alt="鸡年ppt">
                </div>
                <div class="list-info">
                    <p>喜庆元素背景集</p>
                </div>
            </a>
        </div>
        <div class="list">
            <a href="#">
                <div class="list-img">
                    <img src="images/1_07.png" alt="喜庆元素">
                </div>
                <div class="list-info">
                    <p>喜庆元素背景集</p>
                </div>
            </a>
        </div>
        <div class="list">
            <a href="#">
                <div class="list-img">
                    <img src="images/1_09.png" alt="喜庆元素">
                </div>
                <div class="list-info">
                    <p>喜庆元素背景集</p>
                </div>
            </a>
        </div>
        <div style="margin: 0px" class="list">
            <a href="#">
                <div class="list-img">
                    <img src="images/1_11.png" alt="喜庆元素">
                </div>
                <div class="list-info">
                    <p>喜庆元素背景集</p>
                </div>
            </a>
        </div>
    </div>

    <!--友情链接-->
    <div>
        <div class="friendly clearfix">
            <ul>
                <li><a href="">友情链接</a></li>
                <li><a href="">新素材</a></li>
                <li><a href="">新素材</a></li>
                <li><a href="">新素材</a></li>
                <li><a href="">新素材</a></li>
                <li><a href="">新素材</a></li>
                <li><a href="">新素材</a></li>
                <li><a href="">新素材</a></li>
            </ul>
        </div>
        <div class="friend clearfix">
            <ul>
                <li><a href="">这是广告收费内容</a></li>
                <li><a href="">这是广告收费容</a></li>
                <li><a href="">这是广告收费内容</a></li>
                <li><a href="">这是广告收费内容</a></li>
                <li><a href="">这是广告收费内容</a></li>
                <li><a href="">这是广告收费内容</a></li>
                <li><a href="">这是广告收费内容</a></li>
                <li><a href="">这是广告收费内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是商家加盟内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
                <li><a href="">这是关于我们内容</a></li>
            </ul>
        </div>
    </div>

</div>




<footer style="min-width: 1200px">
    <!--底部导航栏-->
    <div class="cont">
        <div class="fl">
            <ul>
                <li><a href="#">官方微博</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">版权声明</a></li>
                <li><a href="#">商务合作</a></li>
                <li><a href="#">售后服务</a></li>
                <li><a href="#">新素材</a></li>
                <li><a href="#">图片下载</a></li>
                <li><a href="#">素材专题</a></li>
                <li><a href="#">千图导航</a></li>
                <li><a  style="position: relative;top: -5px" href="#"><img src="images/logo_03_02.jpg" alt=""></a></li>
                <li>客服电话：400-998-7011</li>
            </ul>
            <br>
            <p>千图网素材为用户免费分享产生，若发现您的权利被侵害，请联系tousu@58pic.com ，我们尽快处理</p>
            <p>Copyright © 2015 <a href="#">千图网</a>沪ICP备10011451号-6 用时：0.0133 0.557 秒 <img style="position: relative;top: 5px" src="images/2_03.jpg" alt=""> 上海工商</p>
        </div>

        <div class="fr">
            <img src="images/logo_02_02.png" alt="">
        </div>
    </div>
</footer>
</body>
</html>